<template>
  <!-- 自助服务受理 -->
  <div class="selfService">
    <ContentWrap>
      <FormContainer :column="3">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="serviceCode" label="服务单号">
            <el-input v-model="formData.serviceCode" placeholder="请输入服务单号" clearable />
          </el-form-item>
          <el-form-item prop="customer" label="联系人">
            <el-input v-model="formData.customer" placeholder="请输入联系人" clearable />
          </el-form-item>
          <el-form-item prop="customerPhone" label="联系电话">
            <el-input v-model="formData.customerPhone" placeholder="请输入联系电话" clearable />
          </el-form-item>
          <el-form-item prop="submitDate" label="提交时间">
            <el-date-picker
              v-model="formData.submitDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            />
          </el-form-item>
          <el-form-item prop="type" label="业务类型">
            <CustomDictSelect
              placeholder="请选择"
              dict-type-code="VIP_BUSINESS_TYPE"
              bind-name="dictName"
              bind-value="dictCode"
              :echo-value.sync="formData.type"
            ></CustomDictSelect>
          </el-form-item>
          <el-form-item prop="state" label="处理状态" hidden>
            <el-select v-model="formData.state" filterable clearable>
              <el-option v-for="(hl,i) in handleStatusList" :key="i" :label="hl.label" :value="hl.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="handler" label="处理人">
            <!-- <el-select v-model="formData.handler" remote :remote-method="getStaffInfo" filterable clearable>
              <el-option v-for="(sl,i) in staffInfoList" :key="i" :value="sl.staffCode" :label="`${sl.staffName}(${sl.accountNo})`"></el-option>
            </el-select> -->
            <StaffSearch v-model="formData.handler" placeholder="请选择处理人"></StaffSearch>
          </el-form-item>
          <el-form-item prop="handlingTime" label="处理时间">
            <el-date-picker
              v-model="formData.handlingTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              clearable
            />
          </el-form-item>
          <el-form-item show more>
            <Button @click="$refs.form.resetFields()">重置</Button>
            <Button type="primary" :loading="loading" enter @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig">
        <el-table-column slot="before" type="index" width="55" label="序号"></el-table-column>
      </table-box>
      <!-- <SelfServiceEdit ref="selfServiceEdit" :type-name="(()=>getServiceTypeName.bind(this))()" @refresh="refresh"></SelfServiceEdit> -->
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
// import SelfServiceEdit from './child/Edit'
import { filtersRaw, parseTime, date24, pageRequsetBody } from '@/utils'
import { getStaffInfo } from '@/api/staffInfo'
import CustomDictSelect from '@/components/CustomDictSelect'
export default {
  name: 'SelfService',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    CustomDictSelect
    // SelfServiceEdit
  },
  data() {
    return {
      formData: {
        serviceCode: '',
        customer: '',
        customerPhone: '',
        submitDate: [],
        type: '',
        state: '',
        handler: '',
        handlingTime: []
      },
      formRules: {},
      otherFilters: [], // 分页查询参数
      loading: false,
      tableConfig: {
        interfacePath: '/call-center/api/v1/appSelfService/page',
        hideFuncBar: true,
        sort: 'submitDate',
        order: 'desc',
        // 表格字段动态配置
        setting: [
          {
            prop: 'serviceCode',
            label: '服务单号',
            minWidth: 155,
            className: 'table-click-text',
            isButton: true,
            clickFun: (row) => {
              this.edit(row)
            }
          },
          {
            prop: 'workOrderCode',
            minWidth: 155,
            label: '关联工单号'
          },
          {
            prop: 'type',
            minWidth: 100,
            label: '业务类型',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'VIP_BUSINESS_TYPE'
            }
          },
          {
            prop: 'customer',
            minWidth: 100,
            label: '联系人'
          },
          {
            prop: 'customerPhone',
            minWidth: 120,
            label: '联系电话'
          },
          {
            prop: 'submitDate',
            minWidth: 140,
            label: '提交时间'
          },
          {
            prop: 'state',
            minWidth: 100,
            label: '处理状态',
            formatData: v => this.getHandleStatusName(v.state)
          },
          {
            prop: 'handlerName',
            minWidth: 120,
            label: '处理人',
            formatData: v => {
              if (v.handlerName && v.handler) {
                return `${v.handlerName}(${v.handler})`
              }
              return ''
            }
          }
        ]
      },
      // 服务类型 业务类型：
      // 咨询0
      // 投诉1
      // 报修2
      // 免费上门3
      // 免费拆装4
      // 家具保养5
      // 以旧换新6
      // serviceTypeList: [
      //   {
      //     value: '',
      //     label: '全部'
      //   },
      //   {
      //     value: '1',
      //     label: '咨询'
      //   },
      //   {
      //     value: '2',
      //     label: '投诉'
      //   },
      //   {
      //     value: '3',
      //     label: '报修'
      //   },
      //   {
      //     value: '4',
      //     label: '免费上门'
      //   },
      //   {
      //     value: '5',
      //     label: '免费拆装'
      //   },
      //   {
      //     value: '6',
      //     label: '家居类型'
      //   },
      //   {
      //     value: '7',
      //     label: '以旧换新'
      //   }
      // ],
      // 处理状态
      handleStatusList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '未处理',
          value: '0'
        },
        {
          label: '已处理',
          value: '1'
        }
      ],
      // 员工列表
      staffInfoList: []
    }
  },
  created() {
    this.getStaffInfo('')
  },
  methods: {
    // 根据条件查询
    queryHandle() {
      this.loading = true
      this.$refs.form
        .validate()
        .then(() => {
          const t = []
          for (const key of Object.keys(this.formData)) {
            const v = this.formData[key]
            if (v instanceof Array) {
              if (v.length < 1) continue
              t.push(
                filtersRaw(key, parseTime(v[0]), '>'),
                filtersRaw(key, parseTime(date24(v[1])), '<=')
              )
              continue
            }
            if (!v) continue
            t.push(filtersRaw(key, v, '='))
          }
          this.otherFilters = t
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    edit(data) {
      this.$router.push({ name: 'SelfServiceEdit', query: { id: data.id }})
      // this.$refs.selfServiceEdit.curData = {}
      // this.$refs.selfServiceEdit.openDailog(data.id)
    },
    // 刷新表格
    refresh(type) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(type || 'opCondition')
      })
    },
    // 员工信息
    getStaffInfo(v) {
      const data = {
        filtersRaw: [
          filtersRaw('staffName', v, 'like')
        ]
      }
      getStaffInfo(pageRequsetBody(data)).then(res => {
        this.staffInfoList = res.data.records
      })
    },
    // 获取处理状态名
    getHandleStatusName(v) {
      if (v === undefined) return ''
      for (const item of this.handleStatusList) {
        if (item.value === v.toString()) {
          return item.label
        }
      }
      return ''
    }
  }
}
</script>
<style lang='scss' module>
</style>
